<template>
  <div class="page-item-row">
    <upload-show class="page-item-inline" ref="uploadShow" v-for="(item, index) in meImgList" :key="item.uid" :data="item"
      :readonly="readonly" @click-big-image="onBigImage(index)" @click-delete="onDeleteImg(index)">
    </upload-show>
    <upload-add v-if="!readonly" class="page-item-inline" ref="uploadAdd" :docType="docType" :multiple="true"
      :is-image="true" :accept="ACCEPT_TYPE_IMAGE" :before-upload="beforeUpload" @upload-success="handleAvatarSuccess"
      @upload-error="handleAvatarError">
    </upload-add>
    <!-- 分割功能 -->
    <!-- <image-cutting
        v-if="isShowImageCutting"
        ref="imageCutting"
        @on-submit="onSubmit"
        @on-close="isShowImageCutting = false"
    ></image-cutting> -->
  </div>
</template>

<script lang="ts" >

export default {
  name: "UploadImg"
};
</script>

<script lang="ts" setup>
import { withDefaults, ref, computed } from "vue";
import { ElMessage } from "element-plus";
import UploadAdd from "./components/UploadAdd.vue";
import UploadShow from "./components/UploadShow.vue";
import { ACCEPT_TYPE, MeFileClass } from "./config";
import { FILE_URL } from "@/config";
import { appAction } from "@/store/app";
import PhotoViewer from "@/components/PhotoViewer";
import { getFileEntity, getFileUrl } from "@/utils/bus";

let props = withDefaults(defineProps<{
  /**
   * 上传参数
   */
  docType: string;

  /**
   * 是否只读
   */
  readonly?: boolean

  /**
   * 限制上传图片的宽 高 比值
   */
  imgWh?: string;

}>(), {
  readonly: false,
  imgWh: ""
})

/**
  * 本地展示的数据
  */
let meImgList = ref<MeFileClass[]>([])
/**
 * 上传类型
 */
let ACCEPT_TYPE_IMAGE = ref(ACCEPT_TYPE.IMAGE)
let uploadImgList = ref<any[]>([])
/**
 * 表示当前图片处理到的索引
 */
let imgSettingIndex = ref<number>(1)
/**
 * 图片展示
 * 用于占位
 */
let meValue = ref<MeFileClass | null>();
const uploadAdd = ref<any>(null)

/**
 * ====================================
 * 图片处理的 处理栈
 * ====================================
 */
/**
* 进行下一个图片的处理
*/
function imgSettingNext() {
  imgSettingIndex.value++;
  if (imgSettingIndex.value >= uploadImgList.value.length) {
    //表示全部图片都处理完成了之后
    //我们进行上传处理
    for (let item of uploadImgList.value) {
      if (!item.isError) {
        //只处理没有错误的 图片信息
        // console.log("item.file", item.file);
        uploadAdd.value.upload(item.file, props.docType);
      }
    }
    //然后置空全部数据
    uploadImgList.value = [];
    imgSettingIndex.value = -1;
  } else {
    //表示尚未处理完成
    let list = props.imgWh.split(":");
    //获取比例数据
    let wP = parseInt(list[0]);
    let hP = parseInt(list[1]);

    //获取需要处理的图片
    let item = uploadImgList.value[imgSettingIndex.value];
    //获取图片信息
    let fr = new FileReader();
    fr.readAsDataURL(item.file);
    let imgDom = new Image();
    //将图片文件转化为base64
    fr.onload = function () {
      imgDom.src = this.result + "";
    };
    imgDom.onload = () => {
      if (wP / hP == imgDom.width / imgDom.height) {
        //然后打标记
        //这里打标记 就是为了在图片上传完成之后 , 要根据这个标记
        //将对应的图片占位给替换掉
        item.file.uid = item.uid;
        //表示上传图片符合比例要求 直接进行下一个图片计算
        imgSettingNext();
      } else {
        console.warn("上传图片比例不符合[" + props.imgWh + "]");
        //打开裁切框进行裁切
        // showImageCutting(imgDom.src, wP, hP, {
        //   //成功之后
        //   submit: (e) => {
        //     //将裁切后的文件,替换之前的文件
        //     item.file = e;
        //     //然后打标记
        //     //这里打标记 就是为了在图片上传完成之后 , 要根据这个标记
        //     //将对应的图片占位给替换掉
        //     item.file.uid = item.uid;
        //     //然后处理下一个文件
        //     this.imgSettingNext();
        //   },
        //   //用户取消切割的时候
        //   close: () => {
        //     //然后在图片占用区域中删除当前图片
        //     let index = this.meImgList.findIndex((meItemItem) => {
        //       return meItemItem.uid == item.uid;
        //     });
        //     this.meImgList.splice(index, 1);

        //     //将当前图片进行错误处理
        //     item.isError = true;

        //     //然后继续处理
        //     this.imgSettingNext();
        //   },
        // });
      }
    };

    //图片加载出错
    imgDom.onerror = (e) => {
      //在图片占用区域中删除当前图片
      let index = meImgList.value.findIndex((meItemItem) => {
        return meItemItem.uid == item.uid;
      });
      meImgList.value.splice(index, 1);
      //报错
      ElMessage.error(e + "");
      //将当前图片进行错误处理
      item.isError = true;
      //然后继续处理
      imgSettingNext();
    };
    //转化为base 文出错
    fr.onerror = (e) => {
      //在图片占用区域中删除当前图片
      let index = meImgList.value.findIndex((meItemItem) => {
        return meItemItem.uid == item.uid;
      });
      meImgList.value.splice(index, 1);
      //报错
      ElMessage.error(e + "");
      //将当前图片进行错误处理
      item.isError = true;
      //然后继续处理
      imgSettingNext();
    };
  }
}

function imgSettingInit() {
  // console.log(this.uploadImgList);
  // debugger
  //索引重置为-1
  imgSettingIndex.value = -1;

  //开始处理
  imgSettingNext();
}


/**
  * 上传之前
  */
// function beforeUpload(file: any, fileList: FileList[]): Promise<void> {
//   //存在上传比例限制
//   if (props.imgWh) {
//     let imgClass = new MeFileClass("", {
//       isLoading: true,
//     });
//     //添加图片占位
//     meImgList.value.push(imgClass);
//     //存在上传比例的时候  , 劫持全部的上传图片数据
//     // this.uploadImgList.push({
//     //   uid: imgClass.uid,
//     //   isError: false,
//     //   file: file,
//     // });

//     // if (fileList.length == this.uploadImgList.length) {
//     //   //两者相等的时候 , 表示已经全部劫持完毕 , 准备计算
//     //   this.imgSettingInit();
//     // }
//     if (fileList.length == meImgList.value.length) {
//       imgSettingInit();
//     }
//     return Promise.reject();
//   } else {
//     let imgClass = new MeFileClass("", {
//       isLoading: true,
//       hzname: "png"
//     });
//     console.log("imgClass", imgClass);
//     //这里打标记 就是为了在图片上传完成之后 , 要根据这个标记
//     //将对应的图片占位给替换掉
//     file["uid"] = imgClass.uid;
//     // 添加图片占位;
//     meImgList.value.push(imgClass);
//     return Promise.resolve();
//   }
// }
function beforeUpload(file: any, fileList: any[]): Promise<void> {
  //存在上传比例限制
  // if (this.imgWh) {
  //   let imgClass = new MeFileClass("", {
  //     isLoading: true,
  //   });
  //   //添加图片占位
  //   this.meImgList.push(imgClass);
  //   //存在上传比例的时候  , 劫持全部的上传图片数据
  //   this.uploadImgList.push({
  //     uid: imgClass.uid,
  //     isError: false,
  //     file: file,
  //   });

  //   if (fileList.length == this.uploadImgList.length) {
  //     //两者相等的时候 , 表示已经全部劫持完毕 , 准备计算
  //     this.imgSettingInit();
  //   }

  //   return Promise.reject();
  // } else {
  let imgClass = new MeFileClass("", {
    isLoading: true,
  });
  //这里打标记 就是为了在图片上传完成之后 , 要根据这个标记
  //将对应的图片占位给替换掉
  file["uid"] = imgClass.uid;
  // 添加图片占位;
  meImgList.value.push(imgClass);
  return Promise.resolve();
  // }
}
/**
 * 图片上传完成
 */
function handleAvatarSuccess(res: any, file: any) {
  //表示成功
  ElMessage.success("图片上传成功");
  //更新图片
  // thisValue.value = new MeFileClass(
  //   FILE_URL + res.fileEntity,
  //   {
  //     isLoading: false,
  //     hzname: "png"
  //   }
  // );
  //更新正式图片
  let index = meImgList.value.findIndex((item) => {
    return item.uid == file.uid;
  });
  if (index >= 0) {
    //重新更新图片
    meImgList.value.splice(
      index,
      1,
      new MeFileClass(
        getFileUrl(res.fileUrl),
        {
          isLoading: false,
          hzname: "png"
        }
      )
    );

  }
}


/**
 * 上传失败
 */
function handleAvatarError(file: any) {
  //删除对应图片
  let index = meImgList.value.findIndex((item) => {
    return item.uid == file.uid;
  });
  if (index >= 0) {
    //重新更新图片
    meImgList.value.splice(
      index,
      1
    );

  }
}


/**
 * 当点击查看大图的时候
 */
function onBigImage(index: any) {
  new PhotoViewer(
    meImgList.value.map((item) => {
      return {
        title: item.url,
        src: item.url,
      };
    }),
    {
      index,
    }
  );
}


/**
 * 当删除图片的时候
 */
function onDeleteImg(index: any) {
  // thisValue.value = null;
  // meValue.value = null;
  //删除文件
  meImgList.value.splice(index, 1);
}

/**
* 初始化数据
 */
function setImgList(imgList: any) {
  meImgList.value = imgList.map((img: any) => {
    return new MeFileClass(getFileUrl(img), {
      isLoading: false,
      hzname: "png"
    });
  });
}

/**
  * 获取图片数据
  */
function getImgList() {
  return meImgList.value.map((item) => {
    return getFileEntity(item.url)
  });
}

/**
 * 导出
 */
defineExpose({
  setImgList,
  getImgList
})
</script>

<style lang="less" scoped>
.page-item-row {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.page-item-inline {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>